<template>
  <el-dialog
    title="设置寄存器地址范围"
    width="350"
    v-model="visible"
    :show-close="false"
    :modal="true"
    :close-on-click-modal="false"
  >
    <el-form
      label-width="auto"
      :model="registerAddress"
      @submit.native.prevent="setCommit"
    >
      <el-form-item label="起始地址:" label-position="right">
        <el-input v-model.number="registerAddress.startAddress"></el-input>
      </el-form-item>
      <el-form-item label="结束地址:" label-position="right">
        <el-input v-model.number="registerAddress.endAddress"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row class="custom-row">
        <el-form-item class="custom-form-item">
          <el-button type="primary" @click="setCommit">确定</el-button>
        </el-form-item>
        <el-form-item class="custom-form-item">
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-row>
    </template>
  </el-dialog>
</template>

<script setup name="SetAddress" lang="ts">
import type {RegisterAddress} from "@/types/register.ts";
import {computed, ref, watch, type PropType} from "vue";
import {useDeviceStore} from "@/stores/device.ts";

const deviceStore = useDeviceStore();

let props = defineProps({
  deviceName: {
    type: String,
    required: true,
  },
  slaveId: {
    type: Number,
    required: true
  },
  registerType: {
    type: Number,
    required: true
  },
  dialogVisible: {
    type: Boolean,
    required: true,
  },
  setAddressDialogVisible: {
    type: Function,
    required: true,
  },
});
const registerAddress = ref<RegisterAddress>({
  registerType: 1,
  startAddress: 0,
  endAddress: 0
});
const visible = computed(() => props.dialogVisible);
const emit = defineEmits(["setSuccess"]);

const setCommit = async () => {
  const isSuccess = await deviceStore.setSlaveAddress(
    props.deviceName,
    props.slaveId,
    props.registerType,
    registerAddress.value.startAddress,
    registerAddress.value.endAddress
  );
  if (isSuccess) {
    emit(
      "setSuccess",
    );
  }
};

const cancel = () => {
  props.setAddressDialogVisible(false);
};
</script>

<style scoped>
.config-container {
  width: 400px;
  padding: 20px;
  text-align: left;

  /* border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
}

.el-form-item {
  margin-bottom: 15px;
}

.custom-row {
  display: flex;
  justify-content: center;
  /* 居中对齐 */
  align-items: center;
  /* 垂直居中（如果需要的话） */
}

.custom-form-item {
  margin: 0 10px;
  /* 左右的间距，根据需要调整 */
}

/* 如果你不想给第一个和最后一个元素添加边距，可以使用伪类选择器 */
.custom-row .custom-form-item:first-child {
  margin-left: 0;
}

.custom-row .custom-form-item:last-child {
  margin-right: 0;
}
</style>
